'use client';

import React from 'react';
import { Layout, Menu } from 'antd/es/index';
import { useRouter, usePathname } from 'next/navigation';
import {
  PieChartOutlined, DesktopOutlined, ClusterOutlined, DeploymentUnitOutlined, MergeCellsOutlined, ControlOutlined,
} from '@ant-design/icons';
import Link from 'next/link';

import { colorBgContainer, borderRadiusLG } from '../config/theme';
import Header from './components/Header/page';

const { Content, Sider } = Layout;

const items2 = [
  {
    key: 'main',
    icon: <DesktopOutlined />,
    label: <Link style={{ fontSize: '15px', fontWeight: '700', margin: '5px 0px' }} href="/main">首页</Link>,
  },
  {
    key: 'applications',
    icon: <ClusterOutlined />,
    label: <Link prefetch style={{ fontSize: '15px', fontWeight: '700', margin: '5px 0px' }} href="/applications">应用部署</Link>,
  },
  {
    key: 'pipelines',
    icon: <DeploymentUnitOutlined />,
    label: <Link prefetch style={{ fontSize: '15px', fontWeight: '700', margin: '5px 0px' }} href="/pipelines">运行环境</Link>,
  },
  {
    key: 'envs',
    icon: <MergeCellsOutlined />,
    label: <Link style={{ fontSize: '15px', fontWeight: '700', margin: '5px 0px' }} href="/envs">应用模板</Link>,
  },
  // {
  //   key: 'deploy',
  //   icon: <AppstoreOutlined />,
  //   label: <Link style={{ fontSize: '15px', fontWeight: '700', margin: '5px 0px' }} href="/deploy">部署资源</Link>,
  // },
  {
    key: 'user',
    icon: <ControlOutlined />,
    label: <Link style={{ fontSize: '15px', fontWeight: '700', margin: '5px 0px' }} href="/user">资源池</Link>,
  },
];
function App({ children = '' }) {
  const pathName = usePathname();

  const [select, setSelect] = React.useState(pathName.split('/')?.[1] || 'main'); // 默认菜单选中/main

  React.useEffect(() => {
    // 如果pathName中有两个/ 则默认为子路由取第一个作为值
    console.log(pathName.split('/'));
    setSelect(pathName.split('/')?.[1] || 'main');
  }, [pathName]);

  return (
    <Layout style={{ width: '100%', height: '100%' }}>
      <Header />
      <Layout>
        <Sider
          width={200}
          style={{
            background: colorBgContainer,
          }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={[select]}
            defaultOpenKeys={[select]}
            // openKeys={[]}
            selectedKeys={[select]}
            theme="light"
            style={{
              height: '100%',
              borderRight: 0,
            }}
            items={items2}
            // onClick={(v)=>{window.linkTo(v)}}
          />
        </Sider>
        <Layout
          style={{
            margin: '0 10px 10px 10px',
          }}
        >
          <Content
            style={{
              boxSizing: 'border-box',
              padding: '10px',
              height: '100%',
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default App;
